<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta charset="GB18030">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/main.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/ztree/zTreeStyle.css">
</head>
<body style="margin-top: -50px">
<div class="panel panel-default" style="margin-top: 0px; width: 700px;">
		<div class="panel-heading">
			<h3 class="panel-title">
				<i class="glyphicon glyphicon-th"></i> 系统字典
			</h3>
		</div>
		<div class="panel-body">
			<form class="form-inline" role="form" style="float: left;">

				<div class="form-group has-feedback">
					<div class="input-group">
						<div class="input-group-addon">一级分类</div>
						<select class="form-control has-success" id="searchCondition1">
						</select> 
						
						<div class="input-group-addon">二级分类</div>
						<select class="form-control has-success" id="searchCondition2">
						<option>默认</option>
						</select>
						<input id="condition" type="text" hidden value="" /> 
						<input id="pn" type="text" hidden value="1" />
					</div>
				</div>
				<button type="button" class="btn btn-warning" id="search_btn">
					<i class="glyphicon glyphicon-search"></i> 查询
				</button>
			</form>
			<button class="btn btn-info" style="float: right; margin-left: 10px;"
				id="add" data-toggle="modal" data-target="#addBook">
				<i class=" glyphicon glyphicon-plus"></i> 新增
			</button>
			<br>
			<hr style="clear: both;">
			<div class="table-responsive">
				<table class="table  table-bordered">
					<thead>
						<tr>
							<th width="30">#</th>
							<th>文本内容</th>
							<th>是否启用</th>
							<th width="100">操作</th>
						</tr>
					</thead>
					<!-- 信息展示 -->
					<tbody id="tb1">
					</tbody>
				</table>
			</div>
			<!-- 分页信息 -->
			<div class="row" id="page_div"></div>
		</div>
		<!-- 新增模态框 -->
		<div class="modal fade" id="addBook" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">新增字典信息</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="form1">
							<div class="form-group">
								<label for="inputbookLevel" class="col-sm-2 control-label">选择级别</label>
								<div class="col-sm-10">
									<input type="radio" name="bookLevel" value="1"> 1级&nbsp;&nbsp;
									<input type="radio" name="bookLevel" value="2"> 2级&nbsp;&nbsp;
									<input type="radio" name="bookLevel" value="3"> 3级
								</div>
								</div>
								<div class="form-group">
								<label for="inputbookPid" class="col-sm-2 control-label">上级菜单</label>
								<div class="col-sm-10">
								<select id="inputbookPid" name="bookPid" class="form-control">
								</select>
								</div>
								</div>
								<div class="form-group">
								<label for="inputbookIsuse" class="col-sm-2 control-label">是否启用</label>
								<div class="col-sm-10">
									<input type="radio" name="bookIsuse" value="启用" checked> 启用&nbsp;&nbsp;
									<input type="radio" name="bookIsuse" value="禁用"> 禁用&nbsp;&nbsp;
								</div>
								</div>
								<div class="form-group">
								<label for="inputbookContent" class="col-sm-2 control-label">字典文本</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputbookContent"
										name="bookContent" placeholder="请输入字典文本" >
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="sub1">保存</button>
					</div>

				</div>
			</div>
		</div>
		<!-- 新增模态框结束 -->
		<!-- 修改模态框 -->
		<div class="modal fade" id="updateBook" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">修改字典信息</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="form2">
						<input type="text" name="bookId" hidden id="upbookId"/>
							<div class="form-group">
								<label for="inputbookLevel" class="col-sm-2 control-label">选择级别</label>
								<div class="col-sm-10" id="d1">
									<input type="radio" name="bookLevel" value="1"> 1级&nbsp;&nbsp;
									<input type="radio" name="bookLevel" value="2"> 2级&nbsp;&nbsp;
									<input type="radio" name="bookLevel" value="3"> 3级
								</div>
								</div>
								<div class="form-group">
								<label for="inputbookPid2" class="col-sm-2 control-label">上级菜单</label>
								<div class="col-sm-10">
								<select id="inputbookPid2" name="bookPid" class="form-control">
								</select>
								</div>
								</div>
								<div class="form-group">
								<label for="inputbookIsuse" class="col-sm-2 control-label">是否启用</label>
								<div class="col-sm-10" id="d2">
									<input type="radio" name="bookIsuse" value="启用" > 启用&nbsp;&nbsp;
									<input type="radio" name="bookIsuse" value="禁用"> 禁用&nbsp;&nbsp;
								</div>
								</div>
								<div class="form-group">
								<label for="inputbookContent2" class="col-sm-2 control-label">字典文本</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputbookContent2"
										name="bookContent" placeholder="请输入字典文本" >
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="sub2">保存</button>
					</div>

				</div>
			</div>
		</div>
		<!-- 修改模态框结束 -->
		<script
			src="${pageContext.request.contextPath}/static/jquery/jquery-2.1.1.min.js"></script>
		<script
			src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript">
		$(function(){
			load();
			loadMenu();
			//查询
			$("#search_btn").click(function() {
				var searchcondition1 = $("#searchCondition1 option:selected").text();
				var searchcondition2 = $("#searchCondition2 option:selected").text();
				if (searchcondition2!="默认") {
					$("#condition").val(searchcondition2);
				}else if(searchcondition1!="默认"){
				$("#condition").val(searchcondition1);
				}else{
					$("#condition").val("");
				}
				$("#pn").val(1);
				load();
			})
			//一级分类关联二级分类
			$("#searchCondition1").change(function(){
				var condition=$("#searchCondition1 option:selected").text();
				if (condition=='默认') {
					$("#searchCondition2").html("<option>默认</option>");
					return;
				}
				$.getJSON("${pageContext.request.contextPath}/book/getMenu2",{"condition" : condition},function(data){
					var str="<option>默认</option>";
					for (var i = 0; i < data.length; i++) {
						str=str+"<option>"+data[i]+"</option>";
					}
					$("#searchCondition2").html(str);
				})
			})
			//选中级别关联文本内容
			$("input[name=bookLevel]").change(function(){
				var bookLevel=$(this).val();
				if (bookLevel=='1') {
					$("#inputbookPid").html("");
					$("#inputbookPid2").html("");
					return;
				}
				$.getJSON("${pageContext.request.contextPath}/book/getMenuByLevel",{"bookLevel" : bookLevel},function(data){
					var str="";
					for (var i = 0; i < data.length; i++) {
						str=str+"<option value='"+data[i].bookId+"'>"+data[i].bookContent+"</option>";
					}
					$("#inputbookPid").html(str);
					$("#inputbookPid2").html(str);
				})
			})
			//确认增加
			$("#sub1").click(function(){
				$.getJSON("${pageContext.request.contextPath}/book/addBook",$("#form1").serialize(),function(data){
					$('#addBook').modal('hide');
					load();
					loadMenu();
				})
			})
			//新增关闭
			$('#addBook').on('hidden.bs.modal', function() {
					$("#form1")[0].reset();
				})
			//确认修改
			$("#sub2").click(function(){
				$.getJSON("${pageContext.request.contextPath}/book/doUpdate",$("#form2").serialize(),function(data){
					$('#updateBook').modal('hide');
					load();
					loadMenu();
				})
			})
			
			
		})
		</script>
		<script type="text/javascript">
		function load(){
			var pn = $("#pn").val();
			var condition = $("#condition").val();
			$.getJSON("${pageContext.request.contextPath}/book/getAll",{"pn" : pn,"condition" : condition},function(data){
				var list = data.list;
				var trStr = "";
				for (var i = 0; i < list.length; i++) {
					trStr = trStr + "<tr>";
					trStr = trStr + "<td>" + (i + 1) + "</td>";
					trStr = trStr + "<td>" + list[i].bookContent
							+ "</td>";
					trStr = trStr + "<td>" + list[i].bookIsuse
							+ "</td>";
					trStr = trStr + "<td>";
					trStr = trStr
							+ "<button type='button' class='btn btn-primary  btn-xs' name='updatebook' bookid='"+list[i].bookId+"'><i class=' glyphicon glyphicon-pencil'></i></button>";
					trStr = trStr + "</td>";
					trStr = trStr + "</tr>";
				}
				$("#tb1").html(trStr);
				var divStr = "";
				divStr = divStr + "<div align='center'>";
				divStr = divStr + "<ul class='pagination'>";
				divStr = divStr
						+ "<li><a href='javascript:changePage(1)'>首页</a></li>";
				divStr = divStr + "<li>";
				if (data.hasPreviousPage) {
					divStr = divStr
							+ "<a href='javascript:changePage(-1)' aria-label='Previous'> <span aria-hidden='true'>«</span></a>";
				}
				divStr = divStr + "</li>";
				var navigatepageNums = data.navigatepageNums;
				for (var i = 0; i < navigatepageNums.length; i++) {
					if (navigatepageNums[i] == data.pageNum) {
						divStr = divStr
								+ "<li class='active'><a href='#'>"
								+ navigatepageNums[i]
								+ "</a></li>";
					}
					if (navigatepageNums[i] != data.pageNum) {
						divStr = divStr
								+ "<li><a href='javascript:changePage("
								+ navigatepageNums[i] + ")'>"
								+ navigatepageNums[i]
								+ "</a></li>";
					}
				}
				divStr = divStr + "<li>";
				if (data.hasNextPage) {
					divStr = divStr
							+ "<a href='javascript:changePage(-2)' aria-label='Next'> <span aria-hidden='true'>»</span> </a>";
				}
				divStr = divStr + "</li>";

				divStr = divStr
						+ "<li><a href='javascript:changePage("
						+ data.pages + ")'>尾页</a></li>";
				divStr = divStr + "</ul>";
				divStr = divStr + "</div>";
				divStr = divStr + "<div align='center'>当前第 "
						+ data.pageNum + " 页.总共 " + data.pages
						+ " 页.一共 " + data.total + " 条记录</div>";
				$("#page_div").html(divStr);
				
				//绑定函数
				updateBook();
			})
		}
		
		function loadMenu(){
			$.getJSON("${pageContext.request.contextPath}/book/getMenu",function(data){
				var str="<option>默认</option>";
				for (var i = 0; i < data.length; i++) {
					str=str+"<option>"+data[i]+"</option>"
				}
				$("#searchCondition1").html(str);
			})
		}
		
		//翻页
		function changePage(page) {
			var pn = $("#pn").val();
			if (page == -1) {
				$("#pn").val(pn - 1);
			} else if (page == -2) {
				var pn1 = parseInt(pn);
				$("#pn").val(pn1 + 1);
			} else {
				$("#pn").val(page);
			}
			load();
		}
		//修改字典信息
		function updateBook(){
			$("[name=updatebook]").click(function(){
				var bookId=$(this).attr("bookid");
				$.getJSON("${pageContext.request.contextPath}/book/updateBook",{"bookId":bookId},function(data){
					var book=data.book;
					var menus=data.menus;
					$("#d1 input[name=bookLevel]").each(function(){
						if ($(this).val()==book.bookLevel) {
							$(this).prop("checked",true);
						}
						var str="";
						for (var i = 0; i < menus.length; i++) {
							if (menus[i].bookContent==book.bookPname) {
							str=str+"<option selected value='"+menus[i].bookId+"'>"+menus[i].bookContent+"</option>";
							}else{
							str=str+"<option value='"+menus[i].bookId+"'>"+menus[i].bookContent+"</option>";
							}
						}
						$("#inputbookPid2").html(str);
						$("#d2 input[name=bookIsuse]").each(function(){
							if ($(this).val()==book.bookIsuse) {
								$(this).prop("checked",true);
							}})
							
						$("#inputbookContent2").val(book.bookContent);
						$("#upbookId").val(book.bookId);
						$('#updateBook').modal('show');
					})
				})
			})
		}
		</script>
</body>
</html>